<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡特效</title>
    <link rel="stylesheet" href="tab.css">
</head>
<body>
    <div class="tab">
        <div class="tab-header">
            <button class="tab-button active" data-tab="tab1">体育</button>
            <button class="tab-button" data-tab="tab2">财经</button>
            <button class="tab-button" data-tab="tab3">娱乐</button>
            <button class="tab-button" data-tab="tab4">军事</button>
            <button class="tab-button" data-tab="tab5">民生</button>
        </div>
        <div class="tab-content">
            <div id="tab1" class="tab-pane active">
                <h2>体育新闻</h2>
                <img src="sports.jpg" alt="体育图片">
                <p>最新的体育赛事报道和运动员动态。</p>
            </div>
            <div id="tab2" class="tab-pane">
                <h2>财经新闻</h2>
                <img src="finance.jpg" alt="财经图片">
                <p>全球金融市场动态和经济政策解读。</p>
            </div>
            <div id="tab3" class="tab-pane">
                <h2>娱乐新闻</h2>
                <img src="entertainment.jpg" alt="娱乐图片">
                <p>娱乐圈最新八卦和明星动态。</p>
            </div>
            <div id="tab4" class="tab-pane">
                <h2>军事新闻</h2>
                <img src="military.jpg" alt="军事图片">
                <p>全球军事动态和国防科技进展。</p>
            </div>
            <div id="tab5" class="tab-pane">
                <h2>民生新闻</h2>
                <img src="livelihood.jpg" alt="民生图片">
                <p>社会民生热点和公共政策解读。</p>
            </div>
        </div>
    </div>
    <script src="tab.js"></script>
</body>
</html>